<template>
  <div class="code-layout">
    <!-- <div class="code-materials">
      <h3>指标监控</h3>
      <div class="metrics">
        <div v-for="e in plots" :key="e.key" class="metrics-item">
          <metrics-chart-bar :metricData="getMetricData" :option_cfg="e" v-if="e && e.value && e.plot_type == 'bar'" />
          <metrics-chart-pie :metricData="getMetricData" :option_cfg="e" v-if="e && e.value && e.plot_type == 'pie'" />
          <metrics-chart-scatter :metricData="getMetricData" :option_cfg="e"
            v-if="e && e.value && e.plot_type == 'scatter'" />
        </div>
        <div v-for="(e, i) in metrics" :key="i" class="metrics-item">
          <metrics-chart :metricData="getMetricData" :option_cfg="e" v-if="e" />
        </div>
      </div>
    </div> -->

    <!-- <div class="code-info">
      <br />
      <h3>资源监控</h3>
      容器:
      <p v-if="podMap.length == 1" class="pod-name">{{ podName }}</p>
      <el-select v-else v-model="podName" class="pod-name-select" placeholder="请选择" @change="selectPod">
        <el-option v-for="item in podMap" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      <v-chart :option="gpuData" class="chart-item" />
      <v-chart :option="cpuData" class="chart-item" />
      <v-chart :option="memData" class="chart-item" />
    </div> -->

    <div class="list-box">
      <div class="list-item">
        <span>Group by：</span>
        <el-select v-model="group" placeholder="请选择分组">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in groups"
            :key="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="list-item">
        <span>容器：</span>
        <p v-if="podMap.length == 1" class="pod-name">{{ podName }}</p>
        <el-select
          v-else
          v-model="podName"
          class="pod-name-select"
          placeholder="请选择"
          @change="selectPod"
        >
          <el-option
            v-for="item in podMap"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>

      <div class="list-item tooltip-bar">
        <span>平滑：</span>
        <el-slider
          class="tooltip"
          v-model="tooltip"
          :format-tooltip="formatTooltip"
        />
      </div>

      <div class="metrice-list-box">
        <div class="title">指标列表</div>
        <ul class="metrice-list-container">
          <li></li>
        </ul>
        <div class="title">资源列表</div>
      </div>
    </div>

    <div class="container" style="width: 100%">
      <h3>资源监控</h3>
      <div class="container-item resource">
        <v-chart :option="gpuData" class="chart-item" />
        <v-chart :option="cpuData" class="chart-item" />
        <v-chart :option="memData" class="chart-item" />
      </div>

      <div class="container-item target">
        <h3>指标监控</h3>
        <div class="metrics">
          <div v-for="e in plots" :key="e.key" class="metrics-item">
            <metrics-chart-bar
              :metricData="getMetricData"
              :option_cfg="e"
              v-if="e && e.value && e.plot_type == 'bar'"
            />
            <metrics-chart-pie
              :metricData="getMetricData"
              :option_cfg="e"
              v-if="e && e.value && e.plot_type == 'pie'"
            />
            <metrics-chart-scatter
              :metricData="getMetricData"
              :option_cfg="e"
              v-if="e && e.value && e.plot_type == 'scatter'"
            />
          </div>
          <div v-for="(e, i) in metrics" :key="i" class="metrics-item">
            <metrics-chart
              :metricData="getMetricData"
              :option_cfg="e"
              v-if="e"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getGameTaskVersionPodName,
  metricKeys,
  metricData,
} from "@/api/gameTask";
import { usageDuration } from "@/api/dashboard";
import metricsChart from "@/components/module/metrics-chart";
import metricsChartBar from "@/components/module/metrics-chart-bar";
import metricsChartPie from "@/components/module/metrics-chart-pie";
import metricsChartScatter from "@/components/module/metrics-chart-scatter";
import { formatTime } from "@/utils/tool";
export default {
  data() {
    return {
      podName: "",
      podMap: [],
      gpuData: {},
      cpuData: {},
      memData: {},
      logSocket: null,
      logMsg: null,
      logData: [],
      metrics: [],
      plots: [],
    };
  },
  props: ["version"],
  components: {
    metricsChart,
    metricsChartBar,
    metricsChartPie,
    metricsChartScatter,
  },
  watch: {
    async version(val) {
      if (val.status == "running") {
        await this.getPod();
        this.selectPod();
      }
    },
  },
  methods: {
    async getPod() {
      let res = await getGameTaskVersionPodName({ id: this.version.id });
      this.podName = res.data[0];
      this.podMap = res.data;
      return;
    },
    async getduration(pod_name, resource_type) {
      return await usageDuration({
        end: formatTime(new Date().getTime()),
        pod_name,
        resource_type,
        start: formatTime(new Date().getTime() - 1000 * 60 * 60 * 1),
        step: "15s",
      });
    },

    async renderMonitoring() {
      let gpu = await this.getduration(this.podName, "gpu");
      let cpu = await this.getduration(this.podName, "cpu");
      let mem = await this.getduration(this.podName, "mem");
      gpu.data.color = [
        "rgb(255, 70, 131)",
        "rgb(255, 158, 68)",
        "rgb(255, 70, 131)",
      ];
      cpu.data.color = [
        "rgb(255, 70, 131)",
        "rgb(255, 158, 68)",
        "rgb(255, 70, 131)",
      ];
      mem.data.color = [
        "rgb(255, 70, 131)",
        "rgb(255, 158, 68)",
        "rgb(255, 70, 131)",
      ];
      gpu.data.title = "GPU";
      cpu.data.title = "CPU";
      mem.data.title = "MEM";
      this.gpuData = gpu.data;
      this.cpuData = cpu.data;
      this.memData = mem.data;
    },
    toBottom() {
      let sH = this.$refs.logBox && this.$refs.logBox.scrollHeight;
      let sT = this.$refs.logBox && this.$refs.logBox.scrollTop;
      let oH = this.$refs.logBox && this.$refs.logBox.offsetHeight;
      if (sH - sT < oH + 40) {
        this.$refs.logBox.scrollTop = this.$refs.logBox.scrollHeight;
      } else {
        console.log(
          "断掉数据push，并且存储到临时容器。 当滚动条滚动到底部的时候 再把临时数据塞进正常ui"
        );
      }
    },
    msgFn(e) {
      if (e.data == "ws message received") return;
      console.log(e.data);
      if (this.logData.length > this.num * 30) {
        this.logData.shift();
        this.logData.push(e.data.replace(/\n/g, "<br />"));
      } else {
        this.logData.push(e.data.replace(/\n/g, "<br />"));
      }
      this.toBottom();
    },

    async getMetricData(id, key, type) {
      let ret = await metricData({ id: id, key: key, type: type });
      return ret;
    },
    async renderMetric() {
      let metricsKey = await metricKeys({
        id: this.version.id,
        type: "metrics",
      });
      let plotsKey = await metricKeys({ id: this.version.id, type: "plots" });
      this.metrics = [];
      metricsKey.data.forEach(async (e) => {
        let option_cfg = {
          id: this.version.id,
          key: e,
          type: "metrics",
        };
        this.metrics.push(option_cfg);
      });
      this.plots = [];
      plotsKey.data.forEach(async (e) => {
        let ret = await metricData({
          id: this.version.id,
          key: e,
          type: "plots",
        });
        let item = ret.data[0];
        let option_cfg = {
          id: this.version.id,
          key: e,
          type: "plots",
          value: item.value,
          plot_type: item.plot_type,
        };
        this.plots.push(option_cfg);
      });
      console.log("this.plots", this.plots);
    },
    selectPod() {
      this.renderMonitoring(this.podName);
    },
  },
  async mounted() {
    if (this.version.status == "running") {
      await this.getPod();
      this.selectPod();
    }
    this.renderMetric();
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";

.code-layout {
  display: flex;
}

// .list-box {
//   width: 16%;
//   margin-right: 20px;

//   .list-item {
//     margin-bottom: 20px;
//   }
// }

// .container {
//   width: 84%;
//   display: flex;
//   justify-content: space-between;

//   .container-item {
//     width: 50%;

//     h3 {
//       line-height: 2em;
//       font-size: 18px;
//     }
//   }
// }

.chart-item {
  height: 320px;
}

.log {
  background: #000;
  padding: 20px;
  margin: 20px 0 0;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6);
  min-height: 400px;

  .log-box {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 10px;

    .log-lis {
      color: #999;
      font-size: 12px;
    }
  }
}

.metrics {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .metrics-item {
    width: 50%;
    height: 400px;
  }
}
</style>
